<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.banner') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('banner-add')" @click="addOrEidt('add',0)">{{ $t('button.add') }}</el-button>
        </template>
      </PageTitle>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list">
        <el-table-column label="ID" prop="id" sortable width="60" />
        <el-table-column :label="$t('table.title')" prop="name" />
        <el-table-column :label="$t('table.subName')" prop="sub_name" />
        <el-table-column :label="$t('table.Logcontent')" prop="hidden">
          <template slot-scope="{row}">
            <el-tag :type="row.hidden|statusFilter">
              {{ row.hidden|formatEmployment }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.Operationtime')" prop="created_at">
          <template v-slot="{row}">
            {{ row.created_at| timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="280" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('banner-edit')" @click="addOrEidt('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button type="warning" size="mini" :disabled="!checkPermission('banner-set')" @click="addOrEidt('page',row)">
              {{ $t('button.images') }}
            </el-button>
            <el-button icon="el-icon-delete" type="dang er" size="mini" :disabled="!checkPermission('banner-del')" @click="delData(row.id)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="listQuery.limit" :current-page="listQuery.page" @current-change="changePage" />
      </el-row>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" @close="btnCanle">
      <el-form ref="ruleForm" :model="formData" label-width="180px" :rules="rules">
        <el-form-item :label="$t('table.title')" prop="name">
          <el-input v-model="formData.name" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.title')" />
        </el-form-item>
        <el-form-item :label="$t('table.subName')" prop="sub_name">
          <el-input v-model="formData.sub_name" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.subName')" />
        </el-form-item>
        <el-form-item :label="$t('table.Bhidden')" prop="hidden">
          <el-select v-model.number="formData.hidden" :placeholder="$t('table.selectThe')+' '+$t('table.Bhidden')">
            <el-option v-for="(item,index) in menuhidden" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 图片 -->
    <el-dialog :title="$t('button.images')" :visible="showDialog1" @close="btnCanle1">
      <el-table border :data="listImg">
        <el-table-column :label="$t('table.sort')" prop="sort" sortable width="80" />
        <el-table-column :label="$t('table.images')" prop="url">
          <template slot-scope="{row}">
            <div class="shopGoos_img"><img :src="row.url" width="100%"></div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.Gotopage')" prop="name" />
        <el-table-column :label="$t('table.Parameter')" prop="id" />
        <el-table-column :label="$t('table.actions')" align="center" width="180" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('bannerC-edit')" @click="addOrEidt('editImg',row)">{{ $t('button.edit') }}</el-button>
            <el-button icon="el-icon-delete" type="dang er" size="mini" :disabled="!checkPermission('bannerC-del')" @click="delImg(row.index)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" :disabled="!checkPermission('bannerC-add')" @click="addOrEidt('imgAdd',0)">{{ $t('button.add') }}</el-button>
      </div>
    </el-dialog>
    <!-- img添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog2" @opened="openDialog" @close="btnCanle2">
      <el-form ref="ruleForm" :model="formData2" label-width="180px" :rules="rules">
        <el-form-item :label="$t('table.images')" prop="url">
          <ImageUpload ref="staffPhoto" />
        </el-form-item>
        <el-form-item :label="$t('table.Gotopage')" prop="typeId">
          <el-select v-model.number="formData2.typeId" :placeholder="$t('table.selectThe')+' '+$t('table.Gotopage')" @change="change">
            <el-option v-for="(item,index) in listApp" :key="index" :label="item.name" :value="item.id" />
            <el-option :label="$t('table.Web')" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData2.typeId!==0" :label="$t('table.Parameter')" prop="id">
          <el-input v-model="formData2.id" style="width: 30%;" :placeholder="$t('table.enterThe')+' '+$t('table.Parameter')" />
        </el-form-item>
        <el-form-item v-if="formData2.typeId===0" :label="$t('table.hrefurl')" prop="hrefurl">
          <el-input v-model="formData2.hrefurl" style="width: 50%;" :placeholder="$t('table.enterThe')+' '+$t('table.hrefurl')" />
        </el-form-item>
        <el-form-item :label="$t('table.sort')" prop="sort">
          <el-input v-model.number="formData2.sort" style="width: 30%;" :placeholder="$t('table.enterThe')+' '+$t('table.sort')" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle2">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="imgOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getBanner, addBanner, delBanner, getAppPage, editBanner } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        aid: 1,
        id: undefined
      },
      count: 0,
      downloadLoading: false,
      list: [],
      dialogTitle: this.$t('button.add'),
      menuhidden: [{
        id: 1,
        value: this.$t('table.show')
      },
      {
        id: 2,
        value: this.$t('table.hide')
      }],
      formData: {
        aid: 38,
        id: undefined,
        name: '',
        sub_name: '',
        hidden: undefined
      },
      rules: {
        name: [{ required: true, message: this.$t('table.name') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      showDialog: false,
      showDialog1: false,
      showDialog2: false,
      imgId: undefined,
      listApp: [],
      listImg: [],
      formData2: {
        index: undefined,
        url: '',
        id: undefined,
        type: 1,
        hrefurl: '',
        sort: undefined,
        name: '',
        typeId: undefined,
        url_type: 2
      },
      isAdd: true
    }
  },
  created() {
    this.getList()
    this.getAppList()
  },
  methods: {
    // 删除图片
    async delImg(e) {
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        const NewList = []

        this.listImg.forEach(item => {
          if (item.index !== e) {
            NewList.push(item)
          }
        })
        this.listImg = NewList
        const one = {
          id: this.imgId,
          images: JSON.stringify(this.listImg)
        }
        await editBanner(one)
        this.getList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 确定新增图片组
    async imgOk() {
      try {
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData2 = { ...this.formData2, url: fileList && fileList.length ? fileList[0].url : '' }
        if (this.isAdd) {
          this.listImg.push(this.formData2)
        } else {
          this.listImg.forEach(item => {
            if (item.index === this.formData2.index) {
              item.id = this.formData2.id
              item.url = this.formData2.url
              item.type = this.formData2.type
              item.hrefurl = this.formData2.hrefurl
              item.sort = this.formData2.sort
              item.name = this.formData2.name
              item.typeId = this.formData2.typeId
              item.url_type = this.formData2.url_type
            }
          })
        }
        const one = {
          id: this.imgId,
          images: JSON.stringify(this.listImg)
        }
        await editBanner(one)
        this.getList()
        this.btnCanle2()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 获取选择的值
    change(e) {
      this.listApp.forEach(element => {
        if (e === 0) {
          this.formData2.type = 3
          return
        }
        if (element.id === e) {
          this.formData2.type = element.type
          this.formData2.hrefurl = element.page
          this.formData2.name = element.name
          this.formData2.url_type = element.url_type
        }
      })
    },
    // 获取列表
    async getList() { // 请求数据
      this.downloadLoading = true
      const { count, list } = await getBanner(this.listQuery)
      this.count = count
      this.list = list
      this.downloadLoading = false
    },
    // 获取页面列表
    async getAppList() { // 请求数据
      const one = {
        aid: 1,
        id: undefined
      }
      const { list } = await getAppPage(one)
      this.listApp = list
    },
    // 点击展开新增修改
    addOrEidt(type, row) {
      if (type === 'add') {
        this.dialogTitle = this.$t('button.add')
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('button.edit')
        this.formData.id = row.id
        this.formData.name = row.name
        this.formData.hidden = row.hidden
        this.formData.sub_name = row.sub_name
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'page') {
        if (row.images !== '') {
          this.listImg = JSON.parse(row.images)
          for (let i = 0; i < this.listImg.length; i++) {
            this.listImg[i].index = i + 1
          }
        }
        this.imgId = row.id
        this.showDialog1 = true
      } else if (type === 'imgAdd') {
        this.dialogTitle = this.$t('button.add')
        this.isAdd = true
        this.formData2.index = this.listImg.length + 1
        this.showDialog2 = true
      } else if (type === 'editImg') {
        this.dialogTitle = this.$t('button.edit')
        this.isAdd = false
        this.formData2.index = row.index
        this.formData2.url = row.url
        this.formData2.id = row.id
        this.formData2.type = row.type
        this.formData2.hrefurl = row.hrefurl
        this.formData2.sort = row.sort
        this.formData2.name = row.name
        this.formData2.typeId = row.typeId
        this.showDialog2 = true
      }
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 调用新增接口
        await addBanner(this.formData)
        // 更新数据
        this.getList()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 取消重置原来的数据
    btnCanle() {
      this.formData = {
        id: undefined,
        aid: 1,
        name: '',
        sub_name: '',
        hidden: undefined
      }
      this.$refs.ruleForm.clearValidate()// 重置校验结果
      this.showDialog = false
    },
    // 删除管理员
    async delData(e) {
      const data = {
        id: e
      }
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await delBanner(data)
        this.getList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    btnCanle1() {
      this.imgId = undefined
      this.listImg = []
      this.showDialog1 = false
    },
    btnCanle2() {
      this.formData2 = {
        index: undefined,
        url: '',
        id: undefined,
        type: 1,
        hrefurl: '',
        sort: undefined,
        name: '',
        typeId: undefined
      }
      this.$refs.staffPhoto.fileList = []
      this.showDialog2 = false
    },
    changePage(newPage) { // 点击分页
      this.listQuery.page = newPage
      this.getList()
    },
    openDialog() {
      // 判断有icon的数据
      if (this.formData2.url) {
        // 这里我们赋值，同时需要给赋值的地址一个标记 upload: true
        this.$refs.staffPhoto.fileList = [{ url: this.formData2.url, upload: true }]
      }
    }
  }
})
</script>
<style scoped lang="scss">
.shopGoos_img{
  width: 180px;
  img{
    width: 100%;
  }
}
</style>
